<template>
  <el-row class="container">
    <v-header></v-header>
    <el-col :span="24" class="main">
      <v-side></v-side>
      <!--右侧内容区域-->
      <section class="content-container">
        <div class="grid-content bg-purple-light">
          <el-col :span="24" class="content-wrapper">
            <v-tab></v-tab>
            <div class="padding">
              <transition name="fade" mode="out-in">
                <keep-alive>
                  <router-view></router-view>
                </keep-alive>
              </transition>
            </div>
          </el-col>
        </div>
      </section>
    </el-col>
  </el-row>
</template>

<script type="text/ecmascript-6">
  import vHeader from '@/components/common/Header'
  import vSide from '@/components/common/Side'
  import vTab from '@/components/common/Tab'
  export default {
    data() {
      return {
      
      }
    },
    components: {
      vHeader,vSide,vTab
    }
  }
</script>

<style lang='scss' scoped>
  .container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }
  .main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 60px;
    bottom: 0;
    overflow: hidden;
  }
  .padding {
    padding: 20px;
  }
  .menu-toggle {
    background: #4A5064;
    text-align: center;
    color: white;
    height: 26px;
    line-height: 30px;
  }
  .content-container {
    flex: 1;
    overflow-y: auto;
    .content-wrapper {
      box-sizing: border-box;
    }
  }
</style>
